<template>
  <div>
    <!-- <div class="toptitle">资源管理列表</div> -->

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="应用选择：">
        <el-select v-model="formInline.region" @change="getVendorId(formInline.region)">
          <el-option v-for="(send,i)  in data3" :key="i" :value="send.appId" :label="send.appName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模块选择：">
        <el-select v-model="formInline.region1" @change="getappId(formInline.region1)">
          <el-option
            v-for="(send,i) in data5"
            :key="i"
            :value="send.moduleId"
            :label="send.moduleName"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="creatyiji()" size="mini">创建一级菜单</el-button>
      </el-form-item>
    </el-form>

    <div>
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%;margin-bottom: 20px;"
        row-key="menuId"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :header-cell-style="{background:'#ebecf0',color:'#606266'}"
      >
        <!-- <el-table-column type width="55"></el-table-column> -->
        <el-table-column prop="resourceName" label="资源名称" width align="left" header-align="center"></el-table-column>
        <el-table-column prop="resourceNumber" label="排序号" align="center">
          <!-- <template slot-scope="scope">{{scope.row.isHomePage===0?'否':'是'}}</template> -->
        </el-table-column>
        <el-table-column prop="status" label="可用状态" align="center">
          <template slot-scope="scope">{{scope.row.status===0?'禁用':'启用'}}</template>
        </el-table-column>

        <el-table-column prop="updateTime" label="创建时间" align="center"></el-table-column>
        <!-- <el-table-column prop="roleName" label="基础菜单" align="center">
          <template slot-scope="scope">{{scope.row.isBaseMenu===0?'否':'是'}}</template>
        </el-table-column>-->

        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.resourceLevel===1"
              @click="fenlimit(scope.row)"
            >创建下级菜单</el-button>
            <el-button type="text" @click="change(scope.row)">编辑</el-button>
            <el-button
              type="text"
              size="mini"
              @click="setDisabled(scope.row,0)"
              v-if="scope.row.resourceLevel===2 && scope.row.status===1"
            >禁用</el-button>
            <el-button
              type="text"
              size="mini"
              @click="setDisabled(scope.row,1)"
              v-if="scope.row.resourceLevel===2 && scope.row.status===0"
            >启用</el-button>
            <el-button
              type="text"
              size="mini"
              @click="del(scope.row)"
              v-if="scope.row.resourceLevel===2||scope.row.resourceLevel===1"
            >删除</el-button>
            <!-- <el-button
              type="text"
              size="mini"
              @click="delone(scope.row)"
              v-if="scope.row.resourceLevel===null"
            >删除按钮</el-button>
            <el-button
              type="text"
              @click="buttonlimit(scope.row)"
              v-if="scope.row.resourceLevel===2"
            >新增按钮</el-button>
            <el-button
              type="text"
              @click="editbuttonlimit(scope.row)"
              v-if="scope.row.resourceLevel===null"
            >编辑按钮</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="按钮权限" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" ref="ruleForm" label-width="80px">
        <el-form-item label="按钮名称" prop="btnName">
          <el-input v-model="ruleForm.btnName"></el-input>
        </el-form-item>

        <el-form-item label="权限标识" prop="btnCode">
          <el-input v-model="ruleForm.btnCode"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="ruleForm.status">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  rolemanage,
  rolemanagetwo,
  getshu,
  modelselect,
  gettable,
  getslider,
  delmenus,
  createBtn,
  deleteBtn,
  enableOrDisablemenus
} from "@/api/platformmanage";

import qs from "qs";
let id = 1000;
export default {
  data() {
    return {
      loading: true,
      tableData: [],

      listQuery: {
        current: 1,
        size: 20
      },
      ruleForm: {
        btnName: "",
        btnCode: "",

        status: ""
      },
      formInline: {
        region: "",
        region1: ""
      },
      menuIdone: "",
      objet: {},
      moduleId: "",
      data3: [],
      total: 5,
      data4: [],
      data5: [],
      data6: [],
      appId: "",
      resourceName: "",
      defaultProps: {
        children: "children",
        label: "resourceName"
      },
      dialogVisible: false,
      multipleSelection: [],
      radio: "",
      selected: {}
    };
  },
  mounted() {
    this.getappId();
  },
  methods: {
    del(v) {
      if (v.children.length == 0) {
        let data = {
          menuId: v.menuId
        };
        this.$confirm("确认删除吗？").then(_ => {
          delmenus(qs.stringify(data)).then(res => {
            this.$message({
              showClose: true,
              message: "删除菜单成功",
              type: "success"
            });
            this.getappId();
          });
        });
      } else {
        this.$message({
          showClose: true,
          message: "请先删除子组织！",
          type: "error"
        });
      }
    },
    
     setDisabled(v,statusTemp){
          let data = {
             menuId: v.menuId,
             status: statusTemp
          };
          let des = "";
          if(statusTemp==0){
              des= "确认禁用此菜单吗？"
          }if(statusTemp==1){
              des= "确认启用此菜单吗？"
          }
          this.$confirm(des).then(_ => {
            enableOrDisablemenus(data).then(res => {
              this.$message({
                showClose: true,
                message: "操作成功",
                type: "success"
              });
              this.getappId();
            });
          });
       
    },

    delone(v) {
      console.log(v, "pp");
      let data = {
        uuid: v.menuId
      };
      this.$confirm("确认删除吗？").then(_ => {
        deleteBtn(qs.stringify(data)).then(res => {
          this.$message({
            showClose: true,
            message: "删除按钮成功",
            type: "success"
          });
        });
      });
    },
    buttonlimit(v) {
      this.menuIdone = v.menuId;
      this.dialogVisible = !this.dialogVisible;
      this.flag = true;
    },
    editbuttonlimit(v) {
      console.log(v, "ioio");
      this.dialogVisible = !this.dialogVisible;
      (this.ruleForm.menuId = v.menuId),
        (this.ruleForm.btnName = v.resourceName),
        (this.ruleForm.btnCode = v.resourceReq),
        (this.ruleForm.status = v.status),
        (this.flag = false);
    },
    confirmEdit() {
      if (this.flag == true) {
        let data = {
          btnName: this.ruleForm.btnName,
          btnCode: this.ruleForm.btnCode,
          status: this.ruleForm.status,
          menuId: this.menuIdone
        };
        createBtn(data).then(res => {
          this.$message({
            showClose: true,
            message: "权限按钮新增成功",
            type: "success"
          });
          this.dialogVisible = !this.dialogVisible;
        });
      } else if (this.flag == false) {
        createBtn(this.ruleForm).then(res => {
          this.$message({
            showClose: true,
            message: "权限按钮编辑成功",
            type: "success"
          });
          this.dialogVisible = !this.dialogVisible;
        });
      }
    },
    changeradio(v) {
      console.log(v, "ooo");
    },
    change(v) {
      console.log(v, "pk");
      this.objet = v;
      this.$router.push({
        name: "newMember",
        params: {
          v: this.objet,
          button: 0
        }
      });
    },
    getVendorId(v) {
      this.formInline.region = v ? v : this.data3[0].appId;

      console.log(v, "lll");
      this._getshu();
      // var u1 = "u1";
      var userId = localStorage.getItem("userId");
      let data = {
        appId: this.formInline.region,
        userId: userId
      };
      modelselect(data).then(res => {
        this.data5 = res.records;
        console.log(this.data5, "pppppgggg");
        this.formInline.region1 = this.data5[0].moduleId;
        this.getappId();
      });
    },
    _getshu() {
      var zTreeAsyncTest = "zTreeAsyncTest";
      let data = {
        roleId: "",
        appId: this.formInline.region,
        otherParam: zTreeAsyncTest
      };
      getshu(data).then(res => {
        this.loading = false;
      });
    },
    creatyiji() {
      this.$router.push({
        name: "newMember",
        params: {
          //   appid: this.formInline.region,
          //   modelid: this.moduleId,
          //   resourceReq: "",
          button: 2
        }
      });
    },
    getappId(v) {
      let data = {};
      gettable(data).then(res => {
        this.loading = false;
        // var father = [],
        //   children = [],
        //   sanmenuone = [];
        console.log(res.records, "ll");
        this.tableData = res.records;
      });
    },

    fenlimit(v) {
      console.log(v, "ll");
      this.$router.push({
        name: "newMember",
        params: {
          v: v,
          button: 1
        }
      });
    },

    renderContent(h, { node, data, store }) {
      return (
        `<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
        </span>`
      );
    },

    showRow(row) {
      //赋值给radio
      this.radio = this.tableData.indexOf(row);
      this.selected = row;
    }
  }
};
</script>
<style lang="less" scoped>
.limttable {
  width: 100%;
  display: inline-block;
  float: right;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 520px;
  margin-left: 20px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 380px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  -ms-user-select: none;
  padding: 6px 13px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
.el-icon-arrow-right:before {
  content: "\E6E0";
  color: #409eff;
  font-weight: 600;
  font-size: 12px;
}
</style>